<template>
<div class="check_box">
	<div class="parent">				
		<Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">{{data.name}}</Checkbox>
	</div>
	<div class="sublist" style="padding-left: 50px;">
		<CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
			<Checkbox v-model="vals.choose" :label="vals.code" v-for="(vals,ind) in data.children" :key="ind">{{vals.name}}</Checkbox>
		</CheckboxGroup>
	</div>
</div>
</template>
<script>
export default {
	data:function(){
		return{		
			indeterminate: false,
			checkAll: false,
			checkAllGroup: [],
			check_arr:[]
		};
	},
	props:['data','index'],
	created:function(){
	
		this.init_data();
	},
	watch:{
		data:function(val){
			this.init_data();
		}
	},
	methods:{
		init_data:function(){
			
			var list = this.data.children;
			
			
			if(!list || list.length<=0){
				if(this.data.choose){
					this.checkAll = true;
				}
				return;
			}
			
			var arr = [];
			for(var i=0;i<list.length;i++){
				this.check_arr.push(list[i].code);
				
				if(list[i].choose){
					arr.push(list[i].code);
				}
				
			}
			
			this.checkAllGroup = arr;
			this.aa(arr);
		},
		handleCheckAll:function() {
			if (this.indeterminate) {
				this.checkAll = false;
			} else {
				this.checkAll = !this.checkAll;
			}
			this.indeterminate = false;

			if (this.checkAll) {
				this.checkAllGroup = this.check_arr
			} else {
				this.checkAllGroup = [];
			}
		},
		checkAllGroupChange:function(data) {
			this.aa(data);
		},
		get_sel_value:function(){
			var arr = [];
			
			for(var i=0;i<this.checkAllGroup.length;i++){
				arr.push(this.checkAllGroup[i]);
			}
			
			if(this.checkAll){
				arr.push(this.data.code);
			}
			
			return arr;
		},
		aa:function(data){

			if(this.checkAllGroup.length>0 && this.checkAllGroup.length==this.check_arr.length){
				this.indeterminate = false;
				this.checkAll = true;
			}
			else if (data.length > 0) {
				this.indeterminate = true;
				this.checkAll = false;
			}
			else{
				this.indeterminate = false;
				this.checkAll = false;
			}
		}
	}
}
</script>
<style scoped>
.check_box{
	border-bottom: 1px solid #e9e9e9;
    padding-bottom: 6px;
    margin-bottom: 6px;
}
</style>